<!--  -->
<template>
	<div
		class="shape"
		:class="{ 'active': (comData.columnCode === (curComponent ? curComponent.columnCode : '')) }"
		@click="selectCurComponent"
		:id="`editor${comData.columnCode}`"
		:style="getShapeStyle(comData.widgetFbl ? comData.widgetFbl : '')"
		@mousedown="handleMouseDown($event, comData, `editor${comData.columnCode}`)"
	>
		<div
			class="shape-point"
			v-for="ii in ((comData.columnCode === (curComponent ? curComponent.columnCode : '')) ? pointList : [])"
			@mousedown="handleMouseDownOnPoint(ii, $event)"
			:key="ii"
			:style="getPointStyle(ii)"
		></div>
		<slot></slot>
	</div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
// import { $ } from '@/utils'
//eslint-disable-next-line
import elementResizeDetectorMaker from "element-resize-detector"
export default {
	data() {
		return {
			pointList: ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'], // 八个方向
			cursors: { "lt": "nw-resize", "t": "n-resize", "rt": "ne-resize", "r": "e-resize", "rb": "se-resize", "b": "s-resize", "lb": "sw-resize", "l": "w-resize" },
		};
	},
	props: {
		comData: {
			typeof: Object,
			default: () => {
				return {}
			}
		}
	},
	
	computed: {
		...mapState([
			'curComponent',
			'customdivList'
		])
	},
	mounted() {
		// let erd = elementResizeDetectorMaker();
		// erd.listenTo(document.getElementsByTagName('body'),() => {
			
		// 	console.log(document.documentElement.clientWidth,'ppp')
		// 	console.log(document.documentElement.clientHeight,'ppp')
		// 	console.log(document.getElementsByClassName('home')[0].clientHeight,'ppp')

		// })
	},
	methods: {
		...mapMutations([
			'setCurComponent',
			'setEditorStyle',
			'setAllShapeStyle'
		]),
		selectCurComponent(e) {
			// 阻止向父组件冒泡
			e.stopPropagation()
			e.preventDefault()
			// if (this.isDragZoom) {
			this.setCurComponent({ component: this.comData })
			// }
		},
		getShapeStyle(widgetFbl) {
			const result = {};
			if (widgetFbl) {
				//有值跟值走，没值自适应
				let fblData = widgetFbl.split("*")
				result['width'] = fblData[0] + 'px'
				result['height'] = fblData[1] + 'px'

			} else {
				result['width'] = this.customdivList[0].width + 'px'
				result['height'] = this.customdivList[0].height + 'px'
			}
			result['left'] = 0
			result['top'] = 0
			return result
		},
		handleMouseDown(e, item) {
			if (this.isDragZoom) {
				e.stopPropagation()
				e.preventDefault()
				console.log(this.comData,'==comdata')
				this.setCurComponent({ component: this.comData })
				let pos = {}
				pos.width = item.fxffWidth
				pos.height = item.fxffHeight
				const startTop = Number(item.fxffY)
				const startLeft = Number(item.fxffX)
				if (item.kjzFbl) {
					let fblData = this.comData.kjzFbl.split("*")
					//可移动的最大top
					const maxDragTop = Number(fblData[1]) - item.fxffHeight
					//可移动的最大left
					const maxDragLeft = Number(fblData[0]) - item.fxffWidth
					//点击位置开始的x,y的坐标轴
					const startY = e.clientY
					const startX = e.clientX

					const move = (moveEvent) => {
						//移动后x,y轴的位置
						const currX = moveEvent.clientX
						const currY = moveEvent.clientY
						pos.top = currY - startY + startTop
						pos.left = currX - startX + startLeft
						//做好区域限制
						if (pos.top <= 0) {
							pos.top = 0
						}
						if (pos.left <= 0) {
							pos.left = 0
						}
						if (pos.top >= maxDragTop) {
							pos.top = maxDragTop
						}
						if (pos.left >= maxDragLeft) {
							pos.left = maxDragLeft
						}

						this.setShapeStyle(pos)
					}
					const up = () => {
						document.removeEventListener('mousemove', move)
						document.removeEventListener('mouseup', up)
					}

					document.addEventListener('mousemove', move)
					document.addEventListener('mouseup', up)
				}
			}


		},
		handleMouseDownOnPoint(point, e) {

				e.stopPropagation()
				e.preventDefault()
			if (!this.comData.widgetFbl) {
				console.log(123)
				const pos = { ...this.defaultStyle }
				const height = Number(pos.height)
				const width = Number(pos.width)
				const top = Number(pos.top)
				const left = Number(pos.left)
				const startX = e.clientX
				const startY = e.clientY
				const move = (moveEvent) => {
					const currX = moveEvent.clientX
					const currY = moveEvent.clientY
					const disY = currY - startY
					const disX = currX - startX
					const hasT = /t/.test(point)
					const hasB = /b/.test(point)
					const hasL = /l/.test(point)
					const hasR = /r/.test(point)
					const newHeight = height + (hasT ? -disY : hasB ? disY : 0)
					const newWidth = width + (hasL ? -disX : hasR ? disX : 0)
					pos.height = newHeight > 0 ? newHeight : 0
					pos.width = newWidth > 0 ? newWidth : 0
					pos.left = left + (hasL ? disX : 0)
					pos.top = top + (hasT ? disY : 0)
					this.setEditorStyle(pos)
				}

				const up = () => {
					document.removeEventListener('mousemove', move)
					document.removeEventListener('mouseup', up)
				}

				document.addEventListener('mousemove', move)
				document.addEventListener('mouseup', up)
			}

		},
		getPointStyle(point) {
			const hasT = /t/.test(point)
			const hasB = /b/.test(point)
			const hasL = /l/.test(point)
			const hasR = /r/.test(point)
			let newLeft = 0
			let newTop = 0
			// 四个角的点
			if (point.length === 2) {
				newLeft = hasL ? 0 : this.comData.fxffWidth
				newTop = hasT ? 0 : this.comData.fxffHeight
			} else {
				// 上下两点的点，宽度居中
				if (hasT || hasB) {
					newLeft = this.comData.fxffWidth / 2
					newTop = hasT ? 0 : this.comData.fxffHeight
				}
				// 左右两边的点，高度居中
				if (hasL || hasR) {
					newLeft = hasL ? 0 : this.comData.fxffWidth
					newTop = Math.floor(this.comData.fxffHeight / 2)
				}
			}

			const style = {
				marginLeft: hasR ? '-4px' : '-4px',
				marginTop: '-4px',
				left: `${newLeft}px`,
				top: `${newTop}px`,
				cursor: this.cursors[point],
			}
			return style

		},
	}
}

</script>
<style lang='scss' scoped>
.editor_header {
	height: 40px;
	border-bottom: 1px solid #ccc;
}
.active {
	outline: 1px solid #70c0ff;
	user-select: none;
}
</style>